<template>
  <v-dialog-layout
    title="添加用户"
    width="480px"
    v-model:visible="visible"
    @confirm="formAdd.onSubmit()"
    @cancel="cancel"
  >
    <v-form-layout
      ref="formAdd"
      v-model:form-data="formData"
      :rules="rules"
      @validateSuccess="validateSuccess"
    >
      <a-form-item label="所属部门" name="departId" placeholder="请选择部门">
        <a-select v-model:value="formData.departId" placeholder="请选择">
          <template v-for="item in departList" :key="item.id">
            <a-select-option :value="item.id">{{ item.departName }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="用户名称" name="userName" placeholder="请输入用户名称">
        <a-input v-model:value.trim="formData.userName" />
      </a-form-item>
      <a-form-item label="用户昵称" required name="nickName" placeholder="请输入用户昵称">
        <a-input v-model:value.trim="formData.nickName" />
      </a-form-item>
      <a-form-item label="手机号码" name="phone" placeholder="请输入手机号码">
        <a-input v-model:value.trim="formData.phone" />
      </a-form-item>
      <a-form-item label="密码" name="password" placeholder="请输入密码">
        <a-input v-model:value.trim="formData.password" />
      </a-form-item>
      <a-form-item label="邮箱" name="email" placeholder="请输入邮箱">
        <a-input v-model:value.trim="formData.email" />
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <a-select v-model:value="formData.gender" placeholder="请选择">
          <a-select-option value="0">女</a-select-option>
          <a-select-option value="1">男</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否可用" name="enabled">
        <a-select v-model:value="formData.enabled" placeholder="请选择">
          <a-select-option :value="0">否</a-select-option>
          <a-select-option :value="1">是</a-select-option>
        </a-select>
      </a-form-item>
    </v-form-layout>
  </v-dialog-layout>
</template>

<script setup lang="ts">
import { addRules } from './config'
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import useCurrentInstance from 'lib-utils/vueInstance'

const { proxy } = useCurrentInstance()
const props = withDefaults(defineProps < {
  visible: boolean,
  initForm: { [key: string]: any } | null
} > (), {
  visible: false
})
const emit = defineEmits(['update:visible', 'close'])

let formAdd = ref();
let departList = ref([]);
let roleList = ref([]);
const formData: {
  id?: string | number
  [key:string]: any
} = reactive({
  id: '',
  departId: '',
  userName: '',
  nickName: '',
  phone: '',
  email: '',
  password: '',
  gender: '1',
  enabled: 1
});
const rules = addRules

onMounted(() => {
  getDepartList()
  getRoleList()
  if (props.initForm) {
    for (let item in formData) {
      formData[item] = props.initForm[item]
    }
    if (formData.enabled) {
      formData.enabled = 1
    } else {
      formData.enabled = 0
    }
    formData.id = props.initForm['id']
  }
})

const getDepartList = () => {
  proxy.$http.get(proxy.$api.department.listAll).then((res:any) => {
    departList.value = res
  }).catch(() => {
  })
}

const getRoleList = () => {
  proxy.$http.get(proxy.$api.role.listAll).then((res:any) => {
    roleList.value = res
  }).catch(() => {
  })
}

const validateSuccess = () => {
  if (formData.id) {
    proxy.$http.post(proxy.$api.user.update, formData).then(res => {
      message.success('更新成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  } else {
    delete formData['id']
    proxy.$http.post(proxy.$api.user.add, formData).then(res => {
      message.success('添加成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  }
};

const cancel = () => {
  emit('update:visible', false)
};
</script>

<style scoped>
</style>